<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
    停止事件冒泡,
    阻止事件默认行为
-->

<body>
    <div id="app">
        <h1>1.绑定监听</h1>
        <button @click="test1">test1</button>
        <button @click="test2('呵呵呵')">test2</button>
        <button @click="test3">test3</button>
        <button @click="test4(123,$event)">test4</button>

        <h1>事件修饰符</h1>
        <div style="width: 200px;height: 200px;background: blue" @click="test5">
            <!-- stop: 阻止冒泡 -->
            <div style="width: 100px;height: 100px;background: red" @click.stop="test6"></div>
        </div>
        <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>

        <h1>按键修饰符</h1>
        <!-- 必须要使用 @ 这种写法,若使用 v-on:click.keyup...这种写法没有用 -->
        <input type="text" @keyup="test8">
        <input type="text" @keyup.13="test9">
        <input type="text" @keyup.enter="test10">
    </div>
</body>
<script type="text/javascript" src="../vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        methods: {
            test1() {
                alert('test1')
            },
            test2(param) {
                alert(param)
            },
            test3(event) {
                alert(event.target.innerHTML)
            },
            test4(param, event) {
                alert(param + ' ' + event.target.innerHTML)
            },
            test5() {
                alert('out')
            },
            test6() {
                //常规解决冒泡
                //event.stopPropagation();
                alert('inner')
            },
            test7() {
                //常规阻止默认行为
                //event.preventDefault()
                alert('baidu')
            },
            test8(event) {
                if (event.keyCode === 13) {
                    alert(event.target.value + ' ' + event.keyCode)
                }
            },
            test9(event) {
                alert(event.target.value + ' ' + event.keyCode)
            },
            test10(event) {
                alert(event.target.value + ' ' + event.keyCode)
            }
        }

    });
</script>

</html>